<template>
  <el-row>
    <el-col :span="8" :offset="8">
      <el-card>
        <h1 style="text-align: center">欢迎使用宿舍管理系统</h1>
        <el-form status-icon :rules="rules" style="text-align: center" ref="loginForm" :model="form">
          <el-form-item prop="account">
            <el-input v-model="form.account" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                type="password"
                v-model="form.password"
                placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="type">
            <el-radio-group v-model="form.type">
              <el-radio label="0">系统管理员</el-radio>
              <el-radio label="1">宿舍管理员</el-radio>
              <el-radio label="2">学生</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="rem">
            <el-checkbox-group v-model="form.rem">
              <el-checkbox true-label="1" false-label="0"
              >记住密码
              </el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <el-button @click="onReset()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import loginApi from "@/http/loginApi";

export default {
  name: "Login",
  data() {
    return {
      form: {
        account: 'admin',
        password: '123',
        type: '0',
        rem: '0'
      },
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '请选择类型', trigger: 'change'}
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!');
      // console.log(this.form);
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          console.log('submit!');
          // 发起登录请求
          loginApi.login(this.form).then(res => {
            if (res.data.code == 200) {
              //登录成功
              //修改vuex中的store变量type的值
              // this.$store.commit("SET_TYPE", this.form.type);
              // this.$store.commit("SET_USERINFO", {id: 1});
              sessionStorage.setItem("token", res.data.token);
              //跳转到Home页面，不需要带参数
              this.$router.replace("/home");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          console.log('error submit!!');
          return false;//阻止表单提交
        }
      });
    },
    onReset() {
      // console.log('1');
      // console.log(this.$refs['loginForm']);
      this.$refs['loginForm'].resetFields();
    }
  }
}
</script>

<style scoped>

</style>